import {UserLogin} from '@/store/type';
import {useUserStore} from '@/store/userStore';
import {showErrorToast} from '@/utils/toast';
import {useNavigation} from '@react-navigation/native';
import {
  Box,
  Button,
  Checkbox,
  HStack,
  Image,
  Input,
  KeyboardAvoidingView,
  Text,
  VStack,
  useTheme,
} from 'native-base';
import React, {useCallback, useState} from 'react';
import {Platform} from 'react-native';

import {SafeAreaView} from 'react-native-safe-area-context';

export default function () {
  const theme = useTheme();
  const {login} = useUserStore();
  const [userLogin, setUserLogin] = useState<UserLogin>();
  const [isRead, setIsRead] = useState<boolean>(false);
  const navigation = useNavigation();
  const onLogin = useCallback(() => {
    // console.log('user', userLogin, isRead);
    if (!userLogin?.account) {
      showErrorToast('用户名不能为空！');
      return;
    }
    if (!userLogin?.code) {
      showErrorToast('验证码不能为空！');
      return;
    }
    if (!isRead) {
      showErrorToast('请阅读之后勾选协议！');
      return;
    }
    if (userLogin.code === '1111') {
      login(userLogin);
      navigation.navigate('home');
    } else {
      showErrorToast('验证码不正确，请重新发送验证码！');
    }
  }, [userLogin, isRead]);
  return (
    <SafeAreaView style={{backgroundColor: theme.colors.coolGray[100]}}>
      <VStack w="100%" h="100%" alignItems={'center'}>
        <Image
          mt={'10'}
          resizeMode={'contain'}
          alt="catlogo"
          size={'lg'}
          source={require('@/assets/img/cat.png')}></Image>
        <Text mt={'2'} mb={'10'} fontSize={'lg'} fontWeight={'black'}>
          你好！欢迎登录爱宠机密
        </Text>
        <KeyboardAvoidingView
          w="full"
          behavior={Platform.OS == 'ios' ? 'padding' : 'height'}>
          <Box px={'5'} flexDirection={'column'} w="full">
            <Input
              InputLeftElement={<Text pr={'2'}>+86</Text>}
              variant={'underlined'}
              w={'full'}
              mb={'10'}
              onChangeText={text => {
                setUserLogin(() => ({
                  account: text,
                  password: '',
                  code: '',
                }));
              }}></Input>
            <Input
              InputLeftElement={<Text pr={'2'}>验证码：</Text>}
              variant={'underlined'}
              mb={'10'}
              onChangeText={text => {
                setUserLogin(state => ({
                  account: state?.account ? state?.account : '',
                  code: text,
                  password: '',
                }));
              }}
              InputRightElement={
                <Button size={'xs'} mb="2">
                  发送验证码
                </Button>
              }></Input>
            <HStack mb={10}>
              <Checkbox
                value={'isRead'}
                isChecked={isRead}
                onChange={isChecked => {
                  setIsRead(() => isChecked);
                }}>
                <Text fontSize={'sm'} color={'coolGray.500'}>
                  我已阅读并同意以上协议
                </Text>
              </Checkbox>
            </HStack>
            <Button rounded={'full'} onPress={onLogin}>
              登录
            </Button>
          </Box>
        </KeyboardAvoidingView>
      </VStack>
    </SafeAreaView>
  );
}
